import React,{Component} from 'react';
import {NavLink} from 'react-router-dom';

import CSSModules from 'react-css-modules';
// import {Header,Footer} from '../../components';
import styles from './index.scss';
import axios from 'axios';
import {
    Carousel,
    CarouselItem,
    CarouselControl,
    CarouselIndicators,
    CarouselCaption,
    Container, Row, Col
  } from 'reactstrap';

  const items = [
    {
      src: '/images/home/banner_1.jpg',
      altText: '',
      caption: ''
    },
    {
      src: '/images/home/banner_2.jpg',
      altText: '',
      caption: ''
    },
    {
      src: '/static/images/7.jpg',
      altText: '',
      caption: ''
    }
  ];
  
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
          activeIndex: 0,
          list:'',
          comment:''
        };
        this.next = this.next.bind(this);
        this.previous = this.previous.bind(this);
        this.goToIndex = this.goToIndex.bind(this);
        this.onExiting = this.onExiting.bind(this);
        this.onExited = this.onExited.bind(this);
      }
    
      onExiting() {
        this.animating = true;
      }
    
      onExited() {
        this.animating = false;
      }
    
      next() {
        if (this.animating) return;
        const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
        this.setState({ activeIndex: nextIndex });
      }
    
      previous() {
        if (this.animating) return;
        const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
        this.setState({ activeIndex: nextIndex });
      }
    
      goToIndex(newIndex) {
        if (this.animating) return;
        this.setState({ activeIndex: newIndex });
      }
      componentWillMount(){
        axios({
            url:"http://47.92.98.104:8080/zhuiying/film",
            method:"post"
          
        }).then(res=>{
          // console.log(res.data[0].cname);
          this.setState({list:res.data});
        });

        axios({
            url:"http://47.92.98.104:8080/zhuiying/filmReview",
            method:"post"
          
        }).then(res=>{
          console.log(res.data);
          this.setState({comment:res.data});
        });
      }
      componentDidMount(){
        // console.log(this.state);
        // var _this=this;
        // setTimeout(function(){ console.log(_this.state);},2000);
       
      //   $.ajax({
      //     url:"http://47.110.60.142:8080/zhuiying/filmReview",
      //     type:"post",
      //     dataType:"json",
      //     success:(data)=>{
      //           console.log(data);
      //     },
        
      // });
     }

     getHot(){
      // var data = eval ("(" +this.state.list[0] + ")");
      //  console.log(data.cname);
     }
    render(){
        const { activeIndex } = this.state;
        const slides = items.map((item) => {
            return (
              <CarouselItem
                onExiting={this.onExiting}
                onExited={this.onExited}
                key={item.src}
              >
                <img src={item.src} alt={item.altText} style = {{ width: '100%', height: 520 }}/>
                <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
              </CarouselItem>
            );
          });

          let hot;
          if(this.state.list){
            var url='http://47.92.98.104:8080/zhuiying/';
            var data=this.state.list;
            hot=(
              <div>
                <div styleName="hot">
                 
                  <div styleName="title"><h4>今日热点</h4></div>
                  <div>
                    <div styleName="left">
                    <div styleName="banner">
                      <NavLink to="/"> <img src={url+data[0].image}/></NavLink>
                    </div>
                      <div styleName="con_left">
                        <h6>马特达为活命改造身体</h6>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《切尔诺贝利日记》灾难来袭，感官炸裂</a></p>
                        <p><a href="#">《虎胆龙威5》孤男英雄直面峡谷柔情</a></p>
                        <p><a href="#">《我的个神啊》来自星星的傻瓜冒险记</a></p>
                      </div>
                      <div styleName="con_right">
                      <h6>魔法奇幻狂潮再度来袭</h6>
                        <p><a href="#">《将夜》唯美混剪</a></p>
                        <p><a href="#">奇葩说：导师辩论战况升级</a></p>
                        <p><a href="#">艾薇儿现场重唱经典</a></p>
                        <p><a href="#">运动员为梦想跨界学声乐</a></p></div>
                    </div>
                    <div styleName="center">
                        <div styleName="item">
                          <a href="">
                             <img src={url+data[1].image}/>
                             <div styleName="center_title">{data[1].cname}</div>
                          </a>
                        </div>
                        <div styleName="item">
                          <a href="">
                             <img src={url+data[2].image}/>
                             <div styleName="center_title">{data[2].cname}</div>
                          </a>
                        </div>
                        <div styleName="item">
                           <a href="">
                             <img src={url+data[3].image}/>
                             <div styleName="center_title">{data[3].cname}</div>
                          </a>
                        </div>
                    </div>
                    <div styleName="right">
                          <a href="">
                             <img src={url+data[4].image}/>
                             <div styleName="right_title">{data[4].cname}</div>
                             <p>西虹市丙级球队大翔队的守门员王多鱼因比赛失利被教练开除，一筹莫展之际王多余突然收到神秘人的邀请...</p>
                          </a>
                    </div>
                  </div>
                  
                </div>
                <hr></hr>
                <div styleName="top">
                    
                       <div styleName="title"><h4>电影排行榜</h4></div>
                    
                    <Row>
                        <Col xs="6">
                           <div styleName="one">
                                <img src={url+data[9].image}/>
                                <span>1</span>
                           </div>
                        </Col>
                        <Col xs="6">
                          <Row>
                              <Col xs="4">
                                <div styleName="two">
                                    <a href="">
                                      <img src={url+data[10].image}/>
                                      <div styleName="title">{data[10].cname}</div>
                                      <p>布尼斯比熊布尼斯比熊
                                      </p>
                                    </a>
                                    <span styleName="span2">2</span>
                                </div>
                              </Col>
                              <Col xs="4">
                                <div styleName="three">
                                    <a href="">
                                      <img src={url+data[11].image}/>
                                      <div styleName="title">{data[11].cname}</div>
                                      <p>布尼斯比熊布尼斯比熊
                                      </p>
                                    </a>
                                    <span styleName="span3">3</span>
                                </div>
                              </Col>
                              <Col xs="4">
                                   <div styleName="four">
                                        <a href="">
                                          <img src={url+data[12].image}/>
                                          <div styleName="title">{data[12].cname}</div>
                                          <p>布尼斯比熊布尼斯比熊布
                                          </p>
                                        </a>
                                        <span styleName="span4">4</span>
                                    </div>
                              </Col>
                          </Row>
                        </Col>
                    </Row>
                    <div styleName="more">
                      查看更多
                  </div>
                </div>
                <hr></hr>
                <div styleName="tv">

                     <Row>
                      <Col xs="10">
                          <Row>
                            <Col xs="12">
                              <div styleName="title"><h4>电视剧</h4></div>
                            </Col>
                          </Row>
                      </Col>
                      <Col xs="2">
                          <Row>
                            <Col xs="6">
                                <h5>排行榜</h5>
                            </Col>
                            <Col xs="6">
                                <span>TOP100>></span>
                            </Col>
                          </Row>
                      </Col>
                    </Row>
                    <Row>
                      <Col xs="4">
                          <NavLink to="/" styleName="img_1">
                              <img src={url+data[13].image}/>
                          </NavLink>
                      </Col>
                      <Col xs="2">
                          <Row styleName="item">
                              <img src={url+data[14].image}/>
                              <h5>{data[14].cname}</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                          <Row styleName="item">
                              <img src={url+data[15].image}/>
                              <h5>{data[15].cname}</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                      </Col>
                      <Col xs="2">
                          <Row styleName="item">
                              <img src={url+data[16].image}/>
                              <h5>{data[16].cname}</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                          <Row styleName="item">
                              <img src={url+data[17].image}/>
                              <h5>{data[17].cname}</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                      </Col>
                      <Col xs="2">
                           <Row styleName="item">
                              <img src={url+data[18].image}/>
                              <h5>{data[18].cname}</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                          <Row styleName="item">
                              <img src={url+data[19].image}/>
                              <h5>{data[19].cname}</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                      </Col>
                      <Col xs="2" styleName="tv_top">
                          <div styleName="no_1">
                             <img src={url+data[20].image}/>
                             <span><i>1</i>倾城时光</span>
                          </div>
                          <div styleName="no_2">
                             <span><i>2</i>将夜</span>
                          </div>
                          <div styleName="no_3">
                            <span><i>3</i>盛唐幻夜</span>
                          </div>
                          <div>
                              <span><i>4</i>我们的四十年</span>
                          </div>
                          <div>
                              <span><i>5</i>双十宠妃2</span>
                          </div>
                          <div>
                              <span><i>6</i>创业时代</span>
                          </div>
                          <div>
                              <span><i>7</i>斗破苍穹</span>
                          </div>
                          
                      </Col>
                    </Row>
                    <div styleName="more">
                        查看更多
                    </div>

                </div>
                <hr></hr>
                <div styleName="will_show">
                  <div styleName="title"><h4>即将上映</h4></div>
                  <div styleName="line">
                  </div>
                    
                    <Row>
                      <Col xs="1" style={{display:"none"}}>.col-3</Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月10日</span><i></i></div>
                            
                            <img src="/images/home/gaishi.jpg" />
                            <div styleName="show_title">{data[21].cname}</div>
                      </Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月11日</span><i></i></div>
                      
                            <img src="/images/home/beishang.jpg" />
                            <div styleName="show_title">{data[22].cname}</div>
                      </Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月12日</span><i></i></div>
                      
                            <img src="/images/home/direnjie.jpg" />
                            <div styleName="show_title">{data[23].cname}</div>
                      </Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月13日</span><i></i></div>
                      
                            <img src="/images/home/yiren2.jpg" />
                            <div styleName="show_title">{data[24].cname}</div>
                      </Col>
                      <Col xs="2" styleName="show">
                           <div styleName="date"><span>11月14日</span><i></i></div>
                      
                            <img src="/images/home/shoumoren.jpg" />
                            <div styleName="show_title">{data[25].cname}</div>
                      </Col>
                      <Col xs="1" style={{display:"none"}}>.col-3</Col>                                    
                    </Row>
                    <div styleName="more">
                        查看更多
                    </div>
                </div>
                <hr></hr>
                <div styleName="guess_like">
                    <Row>
                      <Col xs="9">
                          <Row>
                            <Col xs="10">
                              <div styleName="title"><h4>猜你喜欢</h4></div>
                            </Col>
                            <Col xs="2">
                              <div styleName="change">换一换</div>
                            </Col>
                          </Row>
                          <Row>
                            <Col xs="3">
                              <img src={url+data[5].image}/>
                              <h5>{data[5].cname}</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                            <Col xs="3">
                                <img src={url+data[6].image}/>
                              <h5>{data[6].cname}</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                            <Col xs="3">
                                <img src={url+data[7].image}/>
                              <h5>{data[7].cname}</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                            <Col xs="3">
                                <img src={url+data[8].image}/>
                              <h5>{data[8].cname}</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                          </Row>
                          
                      </Col>
                    
                      <Col xs="3">
                          <Row><h5>精品栏目</h5></Row>
                          <Row>
                            <ul>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                            </ul>
                          </Row>
                      </Col>
                    </Row>
                    <div styleName="more">
                        查看更多
                    </div>
                </div>
              </div>
            )
          }
         
          // datalist=JSON.parse(this.state.list);
          // console.log(this.state.list[0]);

        return (<div>
            
            <div>
            <Carousel
                activeIndex={activeIndex}
                next={this.next}
                previous={this.previous}
            >
                <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
                {slides}
                <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
                <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
            </Carousel>
            </div>
            <div styleName="wrap">
                
                {hot}
                
                <hr></hr>
                <div styleName="comment">
                    
                     
                          <Row>
                            <Col xs="12">
                              <div styleName="title"><h4>热门影评</h4></div>
                            </Col>
                           
                          </Row>
                          <Row>
                            <Col xs="5">
                              <img src="/images/home/kkk.jpg"/>
                              <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                              <div styleName="content">
                                 <h5>守墓人之海峡密宗</h5>
                                 <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                 守墓人之海峡密宗守墓人之海峡密宗
                                 守墓人之海峡密宗守墓人之海峡密宗
                                 </p>
                              </div>
                              
                            </Col>
                            <Col xs="7" styleName="right">
                                <Row styleName="item">
                                  <Col xs="8">
                                  <div styleName="content">
                        
                                    <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    </p>
                                    <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                                    
                                  </div>
                                  </Col>
                                  <Col xs="4" styleName="c_img">
                                     <img src="/images/home/kkk.jpg"/>
                                  </Col>
                                </Row>
                                <Row styleName="item">
                                  <Col xs="8">
                                  <div styleName="content">
                        
                                    <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    </p>
                                    <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                                    
                                  </div>
                                  </Col>
                                  <Col xs="4" styleName="c_img">
                                     <img src="/images/home/kkk.jpg"/>
                                  </Col>
                                </Row>
                                <Row styleName="item">
                                  <Col xs="8">
                                  <div styleName="content">
                        
                                    <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    </p>
                                    <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                                    
                                  </div>
                                  </Col>
                                  <Col xs="4" styleName="c_img">
                                     <img src="/images/home/kkk.jpg"/>
                                  </Col>
                                </Row>
                                
                            </Col>
                          </Row>
                </div>
                
            </div>
            
        </div>)
    }
}

export default CSSModules(Home, styles,{allowMultiple:true});